<template>
    <view style="width: 100%">
        <!-- <editor :id="idName" :class="info.className" :read-only="readOnly" :ref="idName" :placeholder="info.placeText" :style="{height: info.height, 'min-height': info.height}"  @input="bindinput" @ready="onEditorReady" @focus="bindfocus" @blur="bindblur"></editor> -->
        <view :class="info.className" v-if="readOnly" style="color: #333;"><text>{{info.content}}</text></view>
        
        <textarea :id="idName" v-else class="text" :style="{height: info.height, 'min-height': info.height, width: '100%'}" 
            @focus="bindfocus"
            @blur="bindblur"
            @input="bindinput" 
            :placeholder="info.placeText"
            :value="info.content" maxlength="500" :hold-keyboard="true" :auto-blur="true" cursor-spacing="30"/>
        <upload-file :show="show_upload"
            :userType="info.userType || '2'"
            :userId="userId"
            :bottom="uploadFileBottom"
            :file-formats="info.formats"
            @clickEmoji="clickEmoji"
            @chooseFile="chooseFile"
            @close="closePopup"
            ></upload-file>
    </view>
</template>
<script>
import uploadFile from "./upload-file.vue"
export default {
    components: {
        uploadFile
    },
    data() {
        return {
            // userId: -1
            uploadFileBottom: '',
            show_upload: false
        }   
    },
    props: {
        info: {
            type: Object,
            default: ()=>{}
        },
        idName: {
            type: String,
            default: ''
        },
        userId: {
            type: Number,
            default: 0
        },
        readOnly: {
            type: Boolean,
            default: false
        },
        weekTask: {
            type: Number,
            default: -1
        }
    },
    mounted(){
        this.uploadFileBottom = this.info.bottom || this.uploadFileBottom
	},
    methods: {
        closeHtml(){
            // this.editorCtx.clear()
            this.show_upload = false
             this.info.content = ''
        },
        close(){
            this.show_upload = false
        },
        bindfocus(e){
            if(this.info.type == 'commend') return
            // #ifdef APP-PLUS
            this.uploadFileBottom = '0px'
            // #endif
            
			this.info.showUpload = true
            this.show_upload = this.info.showUpload
            this.$emit('closePopup', this.idName)
		},
		bindblur(e){
			// this.info.content = e.detail.html
            // #ifdef APP-PLUS
            this.uploadFileBottom = '0px'
            // #endif
            // this.info.content = e.detail.value
            // this.info.showUpload = false
            // this.show_upload = this.info.showUpload
		},
		bindinput(e){

            
            if(this.weekTask!=-1){
                this.$emit('editorInput', this.weekTask, e.detail.value)
            }else{
                this.info.content = e.detail.value
            }
            
		},
		onEditorReady(e){
				uni.createSelectorQuery().select(`#${this.idName}`).context((res) => {
                    if(res){
                        this.editorCtx = res.context
                    }
				
			}).exec()
		},
		clickEmoji(str){
			
            if(this.weekTask!=-1){
                this.$emit('editorInput', this.weekTask, str, 'bq')
            }else{
                this.info.content += str;
            }
		},
        chooseFile(type, list, sendList){
			this.$emit('chooseFile', type, list, sendList)
			
		},
        closePopup(){
			this.info.showUpload = false
            this.show_upload = this.info.showUpload
		},
    }
}
</script>
<style lang="less" scoped>

</style>